<template>
  <div class="ldap-login">
    <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef">
      <el-form-item label="" prop="account">
        <el-input
          :maxlength="50"
          prefix-icon="User"
          placeholder="请输入手机号/用户名/邮箱"
          v-model="ruleForm.account"
        />
      </el-form-item>
      <el-form-item label="" prop="password">
        <el-input
          type="password"
          show-password
          allowClear
          :maxlength="50"
          placeholder="请输入登录密码"
          v-model="ruleForm.password"
          prefix-icon="Lock"
        />
      </el-form-item>
      <el-form-item class="vericode" label="" prop="imgCode">
        <el-input
          :maxlength="5"
          placeholder="获取图形验证码"
          v-model="ruleForm.imgCode"
        />
        <el-button type="primary" class="captcha-sms" v-if="!isCaptcha" @click="getImgLoginCode">
          获取图形验证码
        </el-button>
        <span v-else>
          <img class="captcha" :src="captchaUrl" alt="" height="50px" />
          <a @click="getImgLoginCode" class="see-not-clear">
            看不清
            <br />
            换一张
          </a>
        </span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :disabled="loading" class="login-btn" @click="onSubmit">
          {{
            loading ? '登录中...' : '登录'
          }}
        </el-button>
        <a class="forget-btn" @click="forgotPassword">忘记密码</a>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { useRouter } from 'vue-router'
import useCommonLogin from '../hooks/useLogin'

export default defineComponent({
  name: 'accountLoginPage',
  data() {
    return {}
  },
  setup() {
    const router = useRouter()
    const ruleForm = reactive<Record<string, any>>({
      account: '',
      password: '',
      imgCode: '',
    })
    const currentLoginWay = 'account'
    // 解构出通用状态和处理程序
    const {
      ruleFormRef,
      loading,
      captchaUrl,
      isCaptcha,
      // methods
      onSubmit, // 提交
      getImgLoginCode, // 获取图形验证码
    } = useCommonLogin(ruleForm, currentLoginWay)
    const rules = reactive<any>({
      account: [
        {
          required: true,
          trigger: 'blur',
          message: '请输入账号',
          // validator: onCheckAccount
        },
      ],
      password: [
        {
          required: true,
          trigger: 'blur',
          // validator: this.onCheckPassword // 临时放开限制
          message: '请输入密码',
        },
      ],
      imgCode: [
        {
          required: true,
          message: '请输入验证码',
          trigger: 'blur',
        },
      ],
    })
    // ------------------------ 方法 ------------------------
    const forgotPassword = () => {
      router.push({ path: '/resetPassword', query: { type: 'forget' } })
    }
    return {
      ruleForm,
      rules,
      ruleFormRef,
      loading,
      captchaUrl,
      isCaptcha,
      // methods
      onSubmit,
      getImgLoginCode,
      forgotPassword
    }
  },
})
</script>

<style scoped lang="less">
@import '../style/common.less';
.forget-btn {
  color: #fff;
  line-height: 50px;
  cursor: pointer;
  margin-left: 30px;
  font-weight: 400;
}
</style>
